<template>
    <button
            class="el-button"
            @click.stop="handleClick"
            :disabled="buttonDisabled || loading"
            :autofocus="autofocus"
            :type="nativeType"
            :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
    >
        <i class="el-icon-loading" v-if="loading"></i>
        <i :class="icon" v-if="icon && !loading"></i>

        <span v-if="$slots.default"><slot></slot></span>
        <template v-if="showDelete">
            <i class="el-icon-close" style="margin-left: 10px" @click.stop="deleteSelf"></i>
        </template>
    </button>
</template>
<script>
    export default {
        name: 'ElButton',

        inject: {
            elForm: {
                default: ''
            },
            elFormItem: {
                default: ''
            }
        },
        props: {
            orgin: {
                type: Number,
                default: ""
            },
            type: {
                type: String,
                default: 'default'
            },
            size: String,
            icon: {
                type: String,
                default: ''
            },
            nativeType: {
                type: String,
                default: 'button'
            },
            loading: Boolean,
            disabled: Boolean,
            plain: Boolean,
            autofocus: Boolean,
            round: Boolean,
            circle: Boolean,
            showDelete: Boolean
        },
        data () {
            return {
                deleteState:false,
            }
        },
        computed: {
            _elFormItemSize() {
                return (this.elFormItem || {}).elFormItemSize;
            },
            buttonSize() {
                return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
            },
            buttonDisabled() {
                return this.disabled || (this.elForm || {}).disabled;
            },
        },

        methods: {
            handleClick(evt) {
                this.$emit('click', evt, {orgin: this.orgin, isDelete: this.deleteState});
            },
            deleteSelf() {
                this.$emit('click', "", {orgin: this.orgin, isDelete: true});
            }
        }
    };
</script>
